<template>
  <div>
    <!--头部-->
    <my-header></my-header>
    <my-break>
      <span slot="break">Goods</span>
    </my-break>
    <div class="accessory-result-page accessory-page">
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a href="javascript:void(0)" @click="sortGoods" class="price">
            Price
            <svg class="icon icon-arrow-short" v-bind:class="{'sort-up':!sortFlag}">
              <use xlink:href="#icon-arrow-short"></use>
            </svg>
          </a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterShow">
            Filter by
          </a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" :class="{'cur':priceChecked=='all'}" @click="setPriceFilter('all')">All</a></dd>
              <dd v-for="(item,index) in priceFilter" @click="setPriceFilter(index)">
                <a href="javascript:void(0)" :class="{'cur':priceChecked==index}">{{item.startPrice}}-{{item.endPrice}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="item in goodsList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'static/'+item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">¥{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="20">
                <span v-if="!isLoading">没有更多了</span>
                <img v-if="isLoading" src="./../assets/loading-spinning-bubbles.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>

    <my-modal v-bind:mdShow="mdShow" @closeModal="closeModal">
      <p slot="message">
        请先登录，否则无法加入到购物车中
      </p>
      <div slot="btnGroup">
        <a href="javascript:void(0)" class="btn btn--m" @click="mdShow=false">关闭</a>
      </div>
    </my-modal>
    <my-modal v-bind:mdShow="mdShowCart" @close="closeModal">
      <p slot="message">
        <svg class="icon-status-ok">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
        </svg>
        <span>加入购物车成功</span>
      </p>
      <div slot="btnGroup">
        <a href="javascript:void(0)" class="btn btn--m" @click="mdShowCart=false">继续购物</a>
        <router-link href="javascript:void(0)"  class="btn btn--m" to="/cart">查看购物车</router-link>
      </div>
    </my-modal>
    <!--尾部-->
    <my-footer></my-footer>
  </div>
</template>
<style>
  .container {
    padding: 0 10px;
  }
  .filter-nav {
    height: 55px;
    line-height: 55px;
    background-color: white;
    text-align: right;
    padding-right: 20px;
    margin: 60px 0 30px 0;
  }
  .def {
    color: #ee7a23;
  }
  .filter-nav span {
    margin-right: 10px;
  }
  .filter-nav a {
    margin-left: 10px;
  }
  .icon {
    width:100%;
    height:100%;
    fill:#e02614
  }
  .icon-arrow-short {
    width: 11px;
    height: 11px;
    transition: all .3s ease-out;
  }
  .goods-container {
    display: flex;
  }
  .price-wrap {
    padding: 0 20px;
    margin-right: 50px;
    width: 230px;
  }
  .price-filter dt {
    height: 40px;
    line-height: 40;
    margin-bottom: 30px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  .price-filter dd {
    height: 26px;
    line-height: 26;
    margin-bottom: 20px;
  }
  .price-filter dd a{
    transition: all .3s ease-out;
  }
  .cur {
    border-left: 2px solid #ee7a2c;
    color: #ee7a2c;
    transition: all .3s ease-out;
    padding-left: 15px;
  }
  .list-wrap {
    flex: 1;
  }
  .list-wrap ul::after {
    clear: both;
    content: '';
    height: 0;
    display: block;
    visibility: hidden;
  }
  .list-wrap .item {
    width: 23.80952%;
    float: left;
    margin-right: 1.5%;
    margin-bottom: 1.5%;
    border: 2px solid #e9e9e9;
    background-color: white;
    transition: all .5s ease-out;
  }
  .list-wrap .item:hover {
    transform: translateY(-10px);
    transition: all .5s ease-out;
    box-shadow: 0 0 3px #e9e9e9;
    border-color: #ee7a2c;
  }
  .list-wrap .item:nth-child(4n) {
    margin-right: 0;
  }
  .list-wrap .info {
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 0 10px;
  }
  .item img {
    width: 100%;
  }
  .info .info-name {
    height: 4em;
    font-weight: bold;
    font-size: 18px;
  }
  .btn {
    display: inline-block;
    width: 100%;
    padding: 0 10px;
    text-align: center;
    color: #d1434a;
    height: 40px;
    line-height: 40px;
    border: 1px solid #d1434a;
    margin-top: 10px;
  }
  .btn:hover {
    background-color: yellow;
    transition: all .3s ease-out;
  }
  .load-more {
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #d1434a;
  }
  .sort-up {
    transform: rotate(180deg);
    transition: all .3s ease-out;
  }
</style>
<script>
  import axios from 'axios'
  import api from '../../config/api/API'
  var defineApi = new api()
  export default{
    data(){
      return {
        goodsList: [],
        priceFilter: [
          {
            startPrice: '0.00',
            endPrice: '100.00'
          },
          {
            startPrice: '100.00',
            endPrice: '500.00'
          },
          {
            startPrice: '500.00',
            endPrice: '1000.00'
          },
          {
            startPrice: '1000.00',
            endPrice: '1500.00'
          },
          {
            startPrice: '1500.00',
            endPrice: '10000.00'
          }
        ],
        priceChecked: 'all',
        filterBy: false,
        overLayFlag: false,
        sortFlag: 1,//排列升降序
        mdShow: false,
        mdShowCart: false,//购物车弹框
        page: 1,
        pageSize: 4,
        busy: false, //是否正在加载过程中
        isLoading: true
      }
    },
    created(){
      this.getGoodsList()
    },
    methods: {
      getGoodsList(flag) {
        let that = this
        defineApi.getModuoData('goods',{
          "page": this.page,
          "size": this.pageSize,
          "sort": this.sortFlag?1:-1,
          "priceLevel": this.priceChecked
        }).then((result)=>{
          console.log(result);
          var res = result.data
          if(res.status == '1') {
            if (flag) {
              var goods = res.result.list

              that.goodsList = that.goodsList.concat(goods)
              if (res.result.count == 0) {
                that.isLoading = false
                that.busy = true
              }else {
                that.isLoading = true
                that.busy = false
              }
            }else {
              that.goodsList = res.result.list
              that.isLoading = true
              that.busy = false
            }
          }else {
            if (flag) {
            }else {
              that.goodsList = []
            }
          }
        })
      },
      addCart(productId) {
        defineApi.getModuoData('goods/addCart',{
          productId: productId
        }).then((result)=>{
          var res = result.data
          this.$store.commit("updateCartCount",1)
          if (res.status == 1) {
            this.mdShowCart = true
          } else {
            this.mdShow = true
          }
        })
      },
      loadMore() {
        console.log('loadmore')
        let that = this
        setTimeout(()=>{
          that.page = that.page + 1
          that.getGoodsList(true)
        },1000)

      },
      sortGoods() {
        this.sortFlag = !this.sortFlag
        this.page = 1
        this.getGoodsList()
      },
      showFilterShow() {
        this.filterBy = true
        this.overLayFlag = true
      },
      closePop() {
        this.filterBy = false
        this.overLayFlag = false
      },
      setPriceFilter(index) {
        this.priceChecked = index
        this.closePop()
        this.page = 1
        this.getGoodsList()
      },
      closeModal() {
        this.mdShow = false
        this.mdShowCart = false
      }
    }
  }
</script>
